<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
	<link rel="icon" href="resources/img/favicon.png" type="image/x-icon" />
		<script src="resources/frontResources/bootstrap-3.0.2/js/bootstrap.min.js"></script>
		<link rel="stylesheet" href="resources/frontResources/bootstrap-3.0.2/css/jumbotron.css">
		<link rel="stylesheet" href="resources/frontResources/bootstrap-3.0.2/css/bootstrap.min.css">
		<script src="resources/frontResources/jquery/js/jquery-1.9.1.js"></script>
		<script src="resources\frontResources\Json\json2.js"></script>
		<script src="http://openlayers.org/api/OpenLayers.js" type="text/javascript"></script>
		<script src="http://openlayers.org/api/OpenLayers.js" type="text/javascript"></script>
		<script src="resources/js/componentesForm.js" type="text/javascript"></script>
	</head>
	<script type="text/javascript">
		$( document ).ready(function() {
		    var listItemFormAux = $("#dinamicInputNameHidden").val();
		    var listItemForm = jQuery.parseJSON(listItemFormAux);
		    formDinamico = " ";
		    for (var i=0; i < listItemForm.length; i++){
		        var item = listItemForm[i];
		        formDinamico = formDinamico+getRowWithComponent(item.nombre_campo,item.tipo_campo);
		    }
		    $("#contenedor").html(formDinamico);
		    $("#contenedor").show();
		});
	
		function selectLayer(){
			var selectedLayer = $("#typeLayer").val();
			if('CO' == selectedLayer){
				$("#shapeData").hide();
				$( "#customData" ).show();
			}else if ('BA' == selectedLayer){
				$("#customData").hide();
				$( "#shapeData" ).show();
			}else{
				$("#customData").hide();
				$( "#shapeData" ).hide();
				
			}
		}
		
		function addCretedComponente(){
			var nameInput = $("#dinamicInputName").val();
			var inputType = $("#dinamicInputType").val();
			if(nameInput!=""){
				$( "#contenedor" ).show();
				textHtlm = $("#contenedor").html();
				$("#contenedor").html(textHtlm + getRowWithComponent(nameInput,inputType));
				$("#dinamicInputName").val("");
			}
		}
		
		//Esta funcion se encarga de recolectar los campos que creo el usuario.
		//Recolectada la info mediante Json se pone el en input hidden para ser envia al servidor.
		function sendDinamicFormToserver(){
			var arrayItems = new Array();

			$('.inputText').each(function (index,valor) {
				var objetoItem = {};
				var itemLabel = $(this).find("label[id='inputTextSpan']");
				var itemType = $(this).find('input').attr('type');

				objetoItem["nombre_campo"] = itemLabel.text();
				objetoItem["tipo_campo"] = itemType;
				arrayItems.push(objetoItem);
			});
			$("#dinamicInputNameHidden").val(JSON.stringify(arrayItems));

		}
		
		//Esta funcion le permitira al usuario poder eliminar un campo que acaba de crear.
		function eliminarElemento(elemento){
			$(elemento).parent().remove();
			if($("#contenedor").html()==""){
				$("#contenedor").hide(500);
			}
		}
		
		function selectMarker(path){
			pathMarker = path.src.split("/");
			$("#idMarkerSelected").html("<img src=\"resources/img/markers/"+pathMarker[7]+"\"/>");
			$("#contenedorMarkerSelected").show();
			$("#idMarketSelected").val(pathMarker[7]);
		}
		
	</script>
<body>
<jsp:include page="../reutilizables/barraSuperior.jsp" flush="true"/>
<br>
<c:set var="ctx" value="${pageContext.request.contextPath}" />

<div class="container">
<ol class="breadcrumb">
  <li><a href="${ctx}/projecDetail.htm">Panel de Control</a></li>
  <li class="active">Proyecto:<span style="font-weight: bold; color: black;">${layerCreateCommand.selectedProject.name}</span></li>
</ol>
<form:form  cssClass="form-horizontal" action="${ctx}/layerCreate.htm" commandName="layerCreateCommand"  id="formulario" role="form" method='POST' enctype="multipart/form-data" onsubmit="sendDinamicFormToserver()">
	 
	  <div class="form-group">
	    	<label for="inputNameProject" class="col-sm-2 control-label">Nombre de la Capa</label>
	    	<div class="col-sm-10">
	    		<form:input cssClass="form-control" id="layerName" path="layerName"/>
	    	</div>
	  </div>
  
	  <!-- Contenedor form select -->
	  <div class="form-group">
	  		<label for="inputNameProject" class="col-sm-2 control-label">Tipo de la Capa</label>
	  		<div class="col-sm-10">
		  		<form:select path="typeLayer" cssClass="form-control" cssStyle="width: 314;" id="typeLayer" name="typeLayer" onchange="selectLayer()" disabled="${layerCreateCommand.edit}">
				   <form:option value="NONE" label="--- Select Layer ---"/>
				   <form:options items="${layerType}" />	  		
		  		</form:select>
		  	</div>	
	  </div>
	  
	  <div id="shapeData" style="display:none;">
	  <!-- Conjunto de archivos necesarios para crear un Shape  -->
		  <div class="form-group">
	      	<label for="inputNameProject" class="col-sm-2 control-label">Cargar Archivo .shp</label>
	      	<div class="col-sm-10">
	    		<input type="file" id="shape" name="shape" class="btn btn-warning" style="width: 314;"/>
	    	</div>	
	  	  </div> 
	  	  
	  	  <div class="form-group">
	      	<label for="inputNameProject" class="col-sm-2 control-label">Cargar Archivo .shx</label>
	      	<div class="col-sm-10">
	    		<input type="file" id="shx" name="shx" class="btn btn-warning" style="width: 314;">
	    	</div>	
	  	  </div> 
	  	  
	  	  <div class="form-group">
	      	<label for="inputNameProject" class="col-sm-2 control-label">Cargar Archivo .dbf</label>
	      	<div class="col-sm-10">
	    		<input type="file" id="dbf" name="dbf" class="btn btn-warning" style="width: 314;">
	    	</div>	
	  	  </div> 
  	</div>
  	
  	<c:if test="${layerCreateCommand.edit}">
  		<script type="text/javascript">
	  		$( document ).ready(function() {
	  			$("#customData").show();
	  		});
  		</script>
  	</c:if>
  	
  	<!-- Inicio del contenedor para generar el formulario que el usuario desee -->
  	<div id="customData" style="display:none;">
		<div class="form-group">
	      	<label for="inputNameProject" class="col-sm-2 control-label">Crear Campo de Carga</label>
			<div class="col-sm-10">
		    	<input type="text"  id="dinamicInputName" name="dinamicInput" class="btn btn-default">
		    	<select id="dinamicInputType" name="dinamicInputType" class="btn btn-default">
		    		<option value="text">Text</option>
		    		<option value="date">Date</option>
		    		<option value="email">Email</option>
		    		<option value="number">Number</option>
		    		<option value="range">Rango</option>
		    		<option value="url">Url</option>
		    	</select>
				<button type="button" class="btn btn-warning" onclick="addCretedComponente();">Agregar</button>
			</div>  
		</div>

		<!-- Este div es para contener el formulario que el usuario va armando.  -->
		<div class="form-group">
			<label for="inputNameProject" class="col-sm-2 control-label">Formulario de Carga</label>
			<div id="contenedor" class="form-group col-sm-10" style="width:950px; margin-left:15px; border: 1px solid #CCC; border-radius: 4; padding: 15px 0px 15px 0px;">
				<p class="text-muted">&nbsp;&nbsp; - En este lugar se muestra el formulario que se esta creando. Usado para la porterior carga de datos en la capa que se esta creando.</p>
			</div>
		</div>	

		<!-- Contenedor de set de marcadores saleccionale para un capa que se esta por crear. -->
		<div id="contenedorMarkers">
			<div class="form-group">
		      	<label for="inputNameProject" class="col-sm-2 control-label">Marcador Capa</label>
				<div class="col-sm-10">
					<div style="height:150px;overflow-y:scroll">
							<c:forEach items="${markers}" var="marker" varStatus="contador">
							   <div class="col-sm-2 col-md-1">
	      							<a href="#" class="thumbnail">
										<img src="resources/img/markers/${marker}.png" onclick="selectMarker(this);"/>
									</a>
								</div>			
							</c:forEach>
					</div>		
				</div>
			</div>		
		</div>
		<div id="contenedorMarkerSelected" style="display: none; ">
			<div class="form-group">
		      	<label for="inputNameProject" class="col-sm-2 control-label">Marcador Seleccionado</label>
				<div id="idMarkerSelected"class="col-sm-10">
				</div>
			</div>		
		</div>	
	</div>
	
	<!-- Botonera ppal -->
	<div class="form-group">
	    	<div class="col-sm-offset-2 col-sm-10">
	      		<button type="button" class="btn btn-warning" onclick="window.location = '<%=request.getContextPath()%>/projecDetail.htm'">Cancelar</button>
	      		<button type="submit" name="_target1" class="btn btn-warning">Siguiente</button>
	    	</div>
	</div>
	<!-- En este input se cargan los items mediante json que hacen a los datos que el usuario cargara en las capasCustom -->
	<form:input type="hidden" path="dinamicInputNameHidden" id="dinamicInputNameHidden" name="dinamicInputNameHidden"/>	
	<!-- En este input se carga el monbre de la img que representa al marcador del layer -->	  	  
	<form:input type="hidden" path="marketSelected" id="idMarketSelected" name="marketSelected"/>		  	  
</form:form>	
</body>
</html>